<template>
  <div id="map" class="map-panel">
    <div style="position: absolute; left: 5px;top: 5px;z-index: 9999">
      <el-button @click="area">点击</el-button>
      <el-button @click="del">删除</el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

import 'leaflet_css'
import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
import Icon from 'leaflet_marker';
import L from 'leaflet'
import 'leaflet.chinatmsproviders'
import 'leaflet.markercluster'
import {addressPoints} from '@/views/leaflet/realworld.388'
import * as esri from 'esri-leaflet'
import '@/plugins/lib/leaflet-tilelayer-wmts'
import '@/plugins/lib/L.KML'
import '@/plugins/lib/leaflet-measure-path/measure-path.css'
import '@/plugins/lib/leaflet-measure-path/measure-path.js'
import '@/plugins/lib/Leaflet.Editable'
import "leaflet-velocity/dist/leaflet-velocity.css";
import 'leaflet-velocity';


//配置
const myIcon = L.icon({
  iconUrl: Icon,
});
L.Icon.Default.prototype.options = {
  iconUrl: Icon,
}
L.Marker.prototype.options.icon = myIcon;
L.KMLMarker.prototype.options.icon = myIcon
L.esri = esri;

//自定义封装leaflet

import DL from '@/plugins/DL';

import {kriging_bounds, kriging_colors} from '@/views/leaflet/temData'

export default {
  name: 'SelfMap',
  data() {
    return {
      areaObj: null,
      lines: {},
      num: 0,
    }
  },
  mounted() {
    /**
     * 高德地图
     */
    var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
      maxZoom: 18,
      minZoom: 2
    })
    var Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
      maxZoom: 18,
      minZoom: 2
    })
    var Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
      maxZoom: 18,
      minZoom: 2
    })
    var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga])

    var baseLayers = {
      '高德地图': Gaode,
      '高德影像': Gaodimage,

    }
    //初始化地图实例
    const dl = new DL('map', {
      minZoom: 3,
      maxZoom: 18,
      center: [36.088948, 103.728967],
      zoom: 6,
      zoomControl: false,
      layers: [Gaode, Gaodimage],
      attributionControl: false,
      crs: L.CRS.EPSG3857,
      // crs: L.CRS.EPSG4326,
      layerNames: ['高德地图', '高德影像'],
      editable: true,
    })
    this.dl = dl;

    //初始化绘制对象
    this.areaObj = this.dl.areaMeasure();

    //添加网格数据
    // axios.get('./data/gird.json').then(res => {
    //   dl.addGdPoint(res.data, {className: 'my-div-icon'});
    // })
    this.init()
  },
  methods: {
    area(e) {
      e.stopPropagation();
      this.num++;
      this.areaObj.init();
      // this.lines['l' + this.num] = this.dl.drawLine();
    },
    del(e) {
      e.stopPropagation();
      //面删除
      this.areaObj.remove();
    },
    init() {
      // console.log(dl instanceof L);
      const dl = this.dl;
      //添加点
      // dl.addPoint({
      //   marker: {
      //     latLng: [36.088948, 103.728967],
      //     oriOptions: {},
      //     bindPopup: {
      //       content: '<div class="mapPopup">兰州大方</div>'
      //     },
      //     openPopup: true,
      //   },
      //   circle: {
      //     latLng: [36.088948, 103.728967],
      //     oriOptions: {
      //       radius: 1000,
      //       color: 'red',
      //       fillColor: '#f03',
      //       fillOpacity: 0.5
      //     },
      //     bindPopup: {
      //       content: 'cicle'
      //     },
      //     openPopup: false,
      //   }
      // })

      //添加动画点
      dl.addAnimationPoint({
        latLng: [36.088948, 103.728967],
        color: '#de0ac9',
        scale: 2
      })

      //聚合点
      // const marksGroup =  dl.addMarkerClusterGroup(addressPoints);

      //添加图片图层
      var imageUrl =
          'https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/baike/pic/item/64380cd7912397dd4f7ad9675082b2b7d0a28756.jpg';
      dl.addImageLayer([
        [36.058039, 103.823557],
        [43.158039, 88.623557]
      ], imageUrl)
    },
    //添加动画点
    addAnimationPoint(){
      this.dl.addAnimationPoint({
        latLng: [36.088948, 103.728967],
        color: '#de0ac9',
        scale: 9
      })
    },
    //添加arcgis
    addArcGis(){
      this.dl.addArcGisLayer('http://192.168.1.136:6080/arcgis/rest/services/guangfujiyuan/Boundariesls/MapServer','dynamicMapLayer',{
        zIndex: 1
      });
    },
    //添加色斑图
    addColorFigure(){
      axios.get('./data/temperature.json').then( res => {
        this.dl.addColorFigure({
          features: res.data.features,
          bounds: [
            [18.1055, 73.4766],
            [50.5693, 135.088]
          ],
          krigingBounds: kriging_bounds,
          krigingColors: kriging_colors,
          opacity: 0.8
        })
      })
    },
    //添加格点
    addGd(){
      axios.get('./data/gird.json').then(res => {
        this.dl.addGdPoint(res.data, {className: 'my-div-icon'});
      })
    },
    //添加geoJson图层
    addGeoJson(){
      axios.get('./data/gansuData.json').then( res => {
        // console.log(res);
        const style = {
          "color": "red", //边框颜色
          "weight": 3, //边框粗细
          "opacity": 1, //透明度
          "fillColor": 'red', //区域填充颜色
          "fillOpacity": 1, //区域填充颜色的透明
        };
        this.dl.addGeoJSON(res.data, {style});
      })
    },
    //添加图片图层
    addImageLayer(){
      var imageUrl =
          'https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/baike/pic/item/64380cd7912397dd4f7ad9675082b2b7d0a28756.jpg';
      this.dl.addImageLayer([
        [36.058039, 103.823557],
        [43.158039, 88.623557]
      ], imageUrl)
    },
    //添加点
    addPoint(){
      this.dl.addPoint({
        marker: {
          latLng: [36.088948, 103.728967],
          oriOptions: {},
          bindPopup: {
            content: '<div class="mapPopup">兰州大方</div>'
          },
          openPopup: true,
        },
        circle: {
          latLng: [36.088948, 103.728967],
          oriOptions: {
            radius: 1000,
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5
          },
          bindPopup: {
            content: 'cicle'
          },
          openPopup: false,
        }
      })
    }
  }
}
</script>

<style scoped>
@import "style/animationPoint.css";

.map-panel {
  width: 100%;
  height: 100%;
}

/deep/ .my-div-icon {
  color: #00FFFF;
  font-weight: bold;
  font-size: 18px;
}

/deep/ .mapPopup {
  padding: 10px;
  font-size: 24px;
  font-weight: bold;
}
</style>
